import React, {PureComponent} from "react"
import "./index.less"
import {ArrowLeftOutlined} from '@ant-design/icons';
import {Icon as LegacyIcon} from '@ant-design/compatible';
import {Button, Input, PageHeader, Select, Table} from "antd";
import SearchAutoComplete from "libs/search-auto-complete"
import columns from "./columns"
import {withRouter} from "react-router"
import {defaultSize} from "project-config"
import pageCompose from "./compose"
import {appContext} from "context/app-context"
import cs from "classnames"

const Option = Select.Option
const InputGroup = Input.Group

const rowSelection = ($selectedRowKeys, selectedRowKeys) => ({
  onChange: (rowKeys) => {
    $selectedRowKeys(rowKeys)
  },
  selectedRowKeys: selectedRowKeys
})


export default @withRouter
@appContext
@pageCompose
class MyFavorite extends PureComponent {

  constructor(props) {
    super(props)
  }

  render() {
    const {
      loading,
      pagination,
      dataSource,
      $selectedRowKeys,
      selectedRowKeys,
      onFastSearch,
      onPageChange,
      delBatch,
      onView,
      onDel
    } = this.props

    const checkConfig = rowSelection($selectedRowKeys, selectedRowKeys)


    return (
      <div className={'zr-panel'}>
        <div className={'zr-panel-header'}>
          <div>
            <PageHeader backIcon={<ArrowLeftOutlined/>}
                        onBack={() => window.history.back()} title={'我的收藏'}
                        subTitle={`管理收藏的版型文件`}/>
          </div>
        </div>
        <div className={'ld2-list-page-box absolute'}>
          <div className={cs('ld2-query-box')} style={{paddingRight: '20px'}}>
            <SearchAutoComplete allowClear={true} onSubmit={onFastSearch} placeholder={'请输入编码查询'}/>
            <div style={{width: '65px'}}></div>
            <Button type={'primary'} className={'red'}
                    size={defaultSize}
                    onClick={delBatch}
                    disabled={selectedRowKeys.length < 1}>
              <LegacyIcon type={'delete'}/>
              批量删除
            </Button>
          </div>
          <div className={'ld2-table-box'}>
            <Table
              rowKey={record => record.id}
              onChange={onPageChange}
              rowSelection={checkConfig}
              loading={loading}
              pagination={pagination}
              size={'middle'}
              columns={columns({onDel, onView})}
              dataSource={dataSource}/>
          </div>
        </div>
      </div>
    )
  }

}


